<template>
	<!-- <scroll-view scroll-y type="custom" @scroll="scroll" class="platform-goods-list-scrollView"> -->
	<grid-view v-if="goodsList.length" type="masonry" main-axis-gap="12" cross-axis-gap="12" class="platform-goods-list" id="platform-goods-list">
		<view @click="toGoodsDeatil(item)" v-for="(item, index) in goodsList" :key="index" class="platform-goods-list-item" :class="{ 'platform-goods-list-item0': index == 0 }">
			<image :src="item.coverUrl"  class="goods-item-img"></image>
			<view class="goods-item-title">
				<text class="goods-item-title-text">
					<text v-if="item.platformName" class="platform-flag">{{ item.platformName }}</text>
					{{ item.goodsName }}
				</text>
			</view>
			<view class="goods-item-price">
				<view v-if="item.offerPrice" class="now-price">
					<text class="now-price-unit">¥</text>
					<text class="now-price-text">{{ item.offerPrice }}</text>
				</view>
				<view v-if="item.price" class="old-price">¥{{ item.price }}</view>
			</view>
			<view class="goods-item-coupon-box">
				<view v-if="item.discountTag" class="goods-item-coupon">
					<!-- <view class="goods-item-coupon-text">券</view> -->
					<view class="goods-item-coupon-price">{{ item.discountTag }}</view>
				</view>
				<view v-if="item.rebatesAmount" class="goods-item-coupon">
					<view class="goods-item-coupon-text goods-item-coupon-text-fan">返现</view>
					<view class="goods-item-coupon-price">¥{{ item.rebatesAmount }}</view>
				</view>
			</view>
		</view>
	</grid-view>
	<!-- </scroll-view> -->
</template>

<script setup>
const props = defineProps({
	goodsList: {
		type: Array,
		default: () => [],
	},
});

// 跳转到商品详情页
const toGoodsDeatil = (item) => {
	console.log(item);
	uni.navigateTo({
		url: `/subPages/goodsDetail/index?goodsId=${item.goodsId}&platform=${item.platform}`
	})
};
</script>

<style lang="scss">
// .platform-goods-list-scrollView {
.platform-goods-list {
	.platform-goods-list-item {
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;

		/* #ifdef H5 */
		margin-bottom: 12px;
		/* #endif */

		.goods-item-img {
			width: 100%;
			height: 170px;
			margin-bottom: 10px;
		}

		.goods-item-title {
			font-size: 14px;
			font-weight: 400;
			line-height: 19.6px;
			padding: 0 6px;

			.goods-item-title-text {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 8px;

				.platform-flag {
					color: #fff;
					position: relative;
					top: -2px;
					border-radius: 2px;
					font-size: 8px;
					font-weight: 400;
					margin-right: 2px;
					padding: 2px;
					background: linear-gradient(101.54deg, #ff0309 -3.19%, #ff6a2a 96.1%);
				}
			}
		}

		.goods-item-price {
			display: flex;
			align-items: center;
			padding: 0 6px;
			margin-bottom: 10px;

			.now-price {
				color: #ff0309;
				margin-right: 4px;

				.now-price-unit {
					font-size: 10px;
					font-weight: 400;
					line-height: 14px;
				}

				.now-price-text {
					font-size: 16px;
					font-weight: 600;
					line-height: 14px;
				}
			}

			.old-price {
				position: relative;
				color: #999999;
				font-size: 10px;
				font-weight: 400;
				line-height: 12px;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					display: inline-block;
					width: 100%;
					height: 1px;
					background-color: #999999;
				}
			}
		}

		.goods-item-coupon-box {
			display: flex;
			align-items: center;
			padding: 0 6px;
			margin-bottom: 10px;

			.goods-item-coupon {
				display: flex;
				align-items: center;
				border-radius: 3px;
				border: 1px solid #ff0309;
				margin-right: 9px;

				&:last-child {
					margin-right: 0px;
				}

				.goods-item-coupon-text {
					color: #ff0309;
					font-size: 12px;
					font-weight: 400;
					line-height: 14px;
					padding: 1px 3px;
					background: rgba(255, 3, 9, 0.12);
				}

				.goods-item-coupon-text-fan {
					color: #fff;
					background-color: #ff0309;
				}

				.goods-item-coupon-price {
					color: #ff0309;
					font-size: 12px;
					font-weight: 400;
					line-height: 14px;
					padding: 1px 2px;
				}
			}
		}
	}
}
// }
</style>
